<template>
	<view class="order_page">
		<view class="icon_box">
			<view class="icon_item" @click="toPage(1)">
				<u-badge style="z-index: 99;" numberType="overflow" max="9" :value="order_num[0]" :offset="[0,0]" :absolute="true"
					shape="circle"></u-badge>
				<image src="../../static/order/pay.png"></image>
				<view>待付款</view>
			</view>
			<view class="icon_item" @click="toPage(2)">
				<u-badge style="z-index: 99;" numberType="overflow" max="9" :value="order_num[1]" :offset="[0,0]" :absolute="true"
					shape="circle"></u-badge>
				<image src="../../static/order/jiedan.png"></image>
				<view>待接单</view>
			</view>
			<view class="icon_item" @click="toPage(3)">
				<u-badge style="z-index: 99;" numberType="overflow" max="9" :value="order_num[2]" :offset="[0,0]" :absolute="true"
					shape="circle"></u-badge>
				<image src="../../static/order/getprice.png"></image>
				<view>待报价</view>
			</view>
			<view class="icon_item" @click="toPage(4)">
				<u-badge style="z-index: 99;" numberType="overflow" max="9" :value="order_num[3]" :offset="[0,0]" :absolute="true"
					shape="circle"></u-badge>
				<image src="../../static/order/boss.png"></image>
				<view>选师傅</view>
			</view>
			<view class="icon_item" @click="toPage(5)">
				<u-badge style="z-index: 99;" numberType="overflow" max="9" :value="order_num[4]" :offset="[0,0]" :absolute="true"
					shape="circle"></u-badge>
				<image src="../../static/order/ing.png"></image>
				<view>施工中</view>
			</view>
			<view class="icon_item" @click="toPage(6)">
				<u-badge style="z-index: 99;" numberType="overflow" max="9" :value="order_num[5]" :offset="[0,0]" :absolute="true"
					shape="circle"></u-badge>
				<image src="../../static/order/ok.png"></image>
				<view>待验收</view>
			</view>
			<view class="icon_item" @click="toPage(7)">
				<u-badge style="z-index: 99;" numberType="overflow" max="9" :value="order_num[6]" :offset="[0,0]" :absolute="true"
					shape="circle"></u-badge>
				<image src="../../static/order/talk.png"></image>
				<view>待评价</view>
			</view>
			<view class="icon_item" @click="toPage(8)">
				<u-badge style="z-index: 99;" numberType="overflow" max="9" :value="order_num[7]" :offset="[0,0]" :absolute="true"
					shape="circle"></u-badge>
				<image src="../../static/order/over.png"></image>
				<view>已完成</view>
			</view>
		</view>
		<view class="title">待办订单 <span>({{order_list.length}})</span></view>
		<block v-if="order_list.length>0">
			<view class="item" v-for="(item,index) in order_list" :key="index" @click="toDetail(item.id)">
				<view class="text">{{item.state_text}}</view>
				<view class="content">
					<image :src="item.category.image"></image>
					<view class="right">
						<view class="goods_name">
							<view>{{item.category_name}}</view>
							<view>x{{item.number}}</view>
						</view>
						<view class="tips">{{item.serve_type==1?'安装':'维修'}}</view>
						<view class="tips">{{item.fittings_status==1?'未到货':'已到货'}}</view>
					</view>
				</view>
				<view class="total_money">总金额：<span style="color: #FA5A28;font-size: 28rpx;font-weight: bold;">￥{{item.order_price}}</span></view>
				<view class="order_tips">{{item.order_type==1?'一口价':item.order_type==2?'报价':item.order_type==3?'悬赏':'房屋装饰'}}</view>
				<view class="btns">
					<view class="btn"  v-if="item.state==1">取消订单</view>
					<view class="btn">重新发布</view>
					<view class="pay_btn" v-if="item.state==7">去评价</view>
					<view class="pay_btn" v-if="item.state==6">去验收</view>
					<view class="pay_btn" v-if="item.state==1">立即付款</view>
				</view>
			</view>
		</block>
		<view v-else class="null">
			<image src="../../static/order/null.png"></image>
			<view>暂无相关记录</view>
		</view>
	</view>
</template>

<script>
	import {orderManage} from "../../api/index.js"
	export default {
		data() {
			return {
				order_list:[],
				order_num:[],
			}
		},
		onShow() {
			this.getOrderManage()
		},
		methods: {
			toPage(e){
				uni.navigateTo({
					url:"/pages/order/ordercopy?index=" + e
				})
			},
			getOrderManage(){
				orderManage().then(res=>{
					console.log(res);
					this.order_list=res.data.list.data
					this.order_num=[]
					Object.keys(res.data.order_num).forEach(key=>{
						this.order_num.push(res.data.order_num[key])
					})
					console.log(this.order_num);
					
				})
			},
			toDetail(e){
				uni.navigateTo({
					url:"/pages/order/orderdetail?id="+e
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.order_page {
		width: 100%;
		height: auto;
		min-height: 1282rpx;
		padding: 32rpx 0rpx;
		background-color: #F9F9F9;

		.icon_box {
			width: 686rpx;
			height: 288rpx;
			border-radius: 8rpx;
			background-color: #FFFFFF;
			padding: 32rpx 44rpx;
			margin: auto;
			display: grid;
			grid-template-columns: repeat(4, 84rpx);
			grid-column-gap: 88rpx;
			grid-row-gap: 32rpx;

			.icon_item {
				width: 84rpx;
				height: 96rpx;
				text-align: center;
				position: relative;

				image {
					width: 48rpx;
					height: 48rpx;
				}

				view {
					font-size: 28rpx;
					color: #666666;
				}
			}
		}

		.title {
			margin-top: 32rpx;
			color: #333333;
			font-size: 28rpx;
			margin-left: 32rpx;
			span {
				color: #FA5A28;
				margin-left: 14rpx;
			}
		}

        .item{
			width: 100%;
			height: 520rpx;
			background-color: #FFFFFF;
			padding: 32rpx;
			margin-top: 32rpx;
			position: relative;
			.order_tips{
				width: 148rpx;
				height: 60rpx;
				line-height: 60rpx;
				background-color: rgba(0, 204, 123, 0.10);
				color: #00CC7B;
				text-align: center;
				position: absolute;
				top: 22rpx;
				right: 0rpx;
				border-radius: 100rpx 0rpx 0rpx 100rpx;
			}
			.text{
				color: #00CC7B;
				font-size: 28rpx;
				font-weight: bold;
			}
			.content{
				width: 100%;
				height: 160rpx;
				display: flex;
				margin-top: 64rpx;
				image{
					width: 160rpx;
					height: 160rpx;
				}
				.right {
					width: 500rpx;
					height: 160rpx;
					margin-left: 32rpx;
				
					.tips {
						color: #666666;
						font-size: 28rpx;
						margin-top: 24rpx;
					}
				
					.goods_name {
						display: flex;
						justify-content: space-between;
						font-size: 28rpx;
						font-weight: bold;
						color: #333333;
					}
				}
			}
			.total_money{
				width: 100%;
				height: 40rpx;
				color: #333333;
				font-size: 24rpx;
				text-align: right;
				margin-top: 66rpx;
			}
			.btns{
				width: 100%;
				height: 56rpx;
				margin-top: 34rpx;
				display: flex;
				justify-content: end;
				// padding-left: 174rpx;
				.btn{
					width: 160rpx;
					height: 56rpx;
					line-height: 48rpx;
					border-radius: 32rpx;
					color: #333333;
					text-align: center;
					font-size: 24rpx;
					border: 2rpx #DDDDDD solid;
					margin-right: 16rpx;
				}
				.pay_btn{
					width: 160rpx;
					height: 56rpx;
					line-height: 48rpx;
					border-radius: 32rpx;
					color: #00CC7B;
					text-align: center;
					font-size: 24rpx;
					border: 2rpx #00CC7B solid;
				}
			}
		}

        .null{
			width: 360rpx;
			height: 500rpx;
			margin: auto;
			margin-top: 160rpx;
			image{
				width: 346rpx;
				height: 298rpx;
			}
			view{
				width: 100%;
				height: 48rpx;
				color: #333333;
				font-size: 28rpx;
				text-align: center;
				margin-top: 80rpx;
			}
		}


	}
</style>